<template>
  <view class="level-select-page">
    <view class="header">
      <text class="title">选择关卡 - {{ difficultyName }}</text>
      <button class="back-btn" @click="navigateBack">
        <text class="icon">←</text> 返回难度
      </button>
    </view>
    
    <view class="level-grid">
      <button 
        v-for="i in 15" 
        :key="i"
        class="level-btn"
        :class="{
          'locked': i > unlockedLevel,
          'unlocked': i <= unlockedLevel && i !== currentLevel,
          'current': i === currentLevel
        }"
        @click="handleLevelClick(i)"
        :disabled="i > unlockedLevel"
      >
        <text>{{ i }}</text>
      </button>
    </view>
    
    <button 
      class="start-btn" 
      @click="navigateToGame"
      :disabled="currentLevel > unlockedLevel"
    >
      开始游戏
    </button>
  </view>
</template>

<script setup>
import { onMounted, ref, computed } from 'vue'
import { useGameStore } from '@/store/game'

const gameStore = useGameStore()
const difficulty = ref('easy')

// 获取页面参数
onMounted(() => {
  const pages = getCurrentPages()
  const currentPage = pages[pages.length - 1]
  difficulty.value = currentPage.options.difficulty || 'easy'
  
  // 确保当前关卡不超过已解锁关卡
  if (gameStore.currentLevel > unlockedLevel.value) {
    gameStore.currentLevel = unlockedLevel.value
  }
})

// 难度名称
const difficultyName = computed(() => {
  const names = {
    easy: '简单',
    medium: '中等',
    hard: '困难'
  }
  return names[difficulty.value] || '简单'
})

// 当前选择的关卡
const currentLevel = computed({
  get: () => gameStore.currentLevel,
  set: (value) => { gameStore.currentLevel = value }
})

// 已解锁关卡
const unlockedLevel = computed(() => {
  return gameStore.unlockedLevels[difficulty.value] || 1
})

// 选择关卡
const handleLevelClick = (level) => {
  if (level <= unlockedLevel.value) {
    currentLevel.value = level
  }
}

// 进入游戏
const navigateToGame = () => {
  if (currentLevel.value <= unlockedLevel.value) {
    gameStore.currentDifficulty = difficulty.value
    uni.navigateTo({ url: '/pages/game/game' })
  }
}

// 返回难度选择
const navigateBack = () => {
  uni.navigateBack()
}
</script>

<style scoped>
.level-select-page {
  background-color: #1a1a2e;
  min-height: 100vh;
  padding: 24rpx;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32rpx;
}

.title {
  font-size: 36rpx;
  font-weight: bold;
  color: #fff;
}

.back-btn {
  background-color: #333;
  color: #fff;
  padding: 8rpx 16rpx;
  border-radius: 8rpx;
  font-size: 28rpx;
  display: flex;
  align-items: center;
}

.icon {
  margin-right: 8rpx;
}

.level-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16rpx;
  margin-bottom: 32rpx;
}

.level-btn {
  width: 100rpx;
  height: 100rpx;
  border-radius: 12rpx;
  font-size: 32rpx;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
}

.level-btn.locked {
  background-color: #333;
  color: #666;
  border: 2rpx solid #444;
}

.level-btn.unlocked {
  background-color: #2d3436;
  color: #fff;
  border: 2rpx solid #6C5CE7;
}

.level-btn.current {
  background-color: #6C5CE7;
  color: #fff;
  border: 2rpx solid #8a7cf5;
}

.start-btn {
  width: 100%;
  background-color: #6C5CE7;
  color: #fff;
  padding: 20rpx;
  border-radius: 8rpx;
  font-size: 32rpx;
  font-weight: bold;
  margin-top: 24rpx;
}

.start-btn:disabled {
  background-color: #444;
  opacity: 0.7;
}
</style>